<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>home</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- Vue库 -->
    <script src="../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- Import jQuery -->
    <script src="../js/jquery.min.js"></script>
    <!-- Imporet v-chart -->
    <script src="../js/echarts.min.js"></script>
    <script src="../js/index.min.js"></script>
    <link rel="stylesheet" href="../css/style.min.css">
    <link rel="stylesheet" href="../icons/element-icons.woff">
    <link rel="stylesheet" href="../css/home.css">
    <link rel="stylesheet" href="../css/sidebar.css">
    <link rel="stylesheet" href="../css/navbar.css">
    <link rel="stylesheet" href="../css/normal.css">
    <!-- <script type="module" src="../js/sidebar.js"></script> -->
</head>

<body>
    <div id="app">
        <div class="app-wrapper" :class="{'sidebar-hide':isActive}">
            <div class="sidebar-container" :span="4">
                <el-scrollbar max-height="1080px">
                    <el-menu mode="vertical" :show-timeout="200" class="el-menu-vertical-demo" @open="handleOpen"
                        @close="handleClose" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9"
                        active-text-color="#409EFF">
                        <el-menu-item index="0">
                            <i class="el-icon-s-home"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-s-goods"></i>
                                <span>商品</span>
                            </template>
                            <el-menu-item index="1-1"  >商品列表</el-menu-item>
                            <el-menu-item index="1-2">添加商品</el-menu-item>
                            <el-submenu index="1-3"><span slot="title">商品分类</span>
<!--                                <el-menu-item index="1-3-1">猫</el-menu-item>-->
<!--                                <el-menu-item index="1-3-2">狗</el-menu-item>-->
<!--                                <el-menu-item index="1-3-3">鱼</el-menu-item>-->
<!--                                <el-menu-item index="1-3-4">鸟</el-menu-item>-->
<!--                                <el-menu-item index="1-3-5">爬行类</el-menu-item>-->
                                <a href="viewProductAttr?categoryId=CATS"> <el-menu-item index="1-3-1">猫</el-menu-item></a>
                                <a href="viewProductAttr?categoryId=DOGS"><el-menu-item index="1-3-2">狗</el-menu-item></a>
                                <a href="viewProductAttr?categoryId=FISH"><el-menu-item index="1-3-3">鱼</el-menu-item></a>
                                <a href="viewProductAttr?categoryId=BIRDS"><el-menu-item index="1-3-4">鸟</el-menu-item></a>
                                <a href="viewProductAttr?categoryId=REPTILES"><el-menu-item index="1-3-5">爬行类</el-menu-item></a>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="2">
                            <i class="el-icon-s-order"></i>
                            <span slot="title">订单</span>
                        </el-menu-item>
                        <el-menu-item index="3" disabled>
                            <i class="el-icon-document"></i>
                            <span slot="title">待开发</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-scrollbar>
            </div>
            <div class="main-container" id="main-container" :span="20">
                <el-menu class="navbar" mode="horizontal">
                    <div class="hamburger-container" :toggleClick="toggleSideBar" :isActive="opened">
                        <svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}"
                            style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
                            <path
                                d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
                                p-id="1692"></path>
                            <path
                                d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
                                p-id="1693"></path>
                            <path
                                d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
                                p-id="1694"></path>
                        </svg>
                    </div>
                    <el-dropdown class="avatar-container" trigger="click" @command="handleCommand">
                        <div class="avatar-wrapper">
                            <img class="user-avatar">
                            <i class="el-icon-caret-bottom"></i>
                        </div>
                        <el-dropdown-menu class="user-dropdown" slot="dropdown">
                            <a class="inlineBlock" to="/">
                                <el-dropdown-item command="home">
                                    首页
                                </el-dropdown-item>
                            </a>
                            <el-dropdown-item divided>
                                <span @click="logout" style="display:block;">退出</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-menu>
                <div class="app-container">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>您好！管理员</span><span style="color: #409EFF;">{{admin}}</span>
                            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                        </div>
                        <div v-if="sellLevel == 1" class="text item" >
                            您的商品热销不衰，已成为许多用户的最爱，继续加油吧！

                        </div>
                        <div v-else-if="sellLevel == 2" class="text item">
                            您的商品销量表现不错，但还有进一步的提升空间。
                        </div>
                        <div v-else-if="sellLevel == 3" class="text item">
                            您可以考虑调整商品价格、优化商品描述等方式提升销量。
                        </div>
                    </el-card>
                    <div class="total-layout">
                        <el-row :gutter="20">
                            <el-col :span="6" :offset="3">
                                <div class="total-frame">
                                    <img src="../images/home_order.png" class="total-icon">
                                    <div class="total-title">今日订单总数</div>
                                    <div class="total-value">200</div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="total-frame">
                                    <img src="../images/home_today_amount.png" class="total-icon">
                                    <div class="total-title">今日销售总额</div>
                                    <div class="total-value">￥5000.00</div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="total-frame">
                                    <img src="../images/home_yesterday_amount.png" class="total-icon">
                                    <div class="total-title">昨日销售总额</div>
                                    <div class="total-value">￥5000.00</div>
                                </div>
                            </el-col>
                            <!--<el-col :span="6">-->
                            <!--<div class="total-frame">-->
                            <!--<svg-icon icon-class="total-week" class="total-icon">-->
                            <!--</svg-icon>-->
                            <!--<div class="total-title">近7天销售总额</div>-->
                            <!--<div class="total-value">￥50000.00</div>-->
                            <!--</div>-->
                            <!--</el-col>-->
                        </el-row>
                    </div>
                    <div class="statistics-layout">
                        <div class="layout-title">订单统计</div>
                        <el-row>
                            <el-col :span="4">
                                <div style="padding: 20px">
                                    <div>
                                        <div style="color: #909399;font-size: 14px">本月订单总数</div>
                                        <div style="color: #606266;font-size: 24px;padding: 10px 0">10000</div>
                                        <div>
                                            <span class="color-success" style="font-size: 14px">+10%</span>
                                            <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
                                        </div>
                                    </div>
                                    <div style="margin-top: 20px;">
                                        <div style="color: #909399;font-size: 14px">本周订单总数</div>
                                        <div style="color: #606266;font-size: 24px;padding: 10px 0">1000</div>
                                        <div>
                                            <span class="color-danger" style="font-size: 14px">-10%</span>
                                            <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
                                        </div>
                                    </div>
                                    <div style="margin-top: 20px;">
                                        <div style="color: #909399;font-size: 14px">本月销售总额</div>
                                        <div style="color: #606266;font-size: 24px;padding: 10px 0">100000</div>
                                        <div>
                                            <span class="color-success" style="font-size: 14px">+10%</span>
                                            <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
                                        </div>
                                    </div>
                                    <div style="margin-top: 20px;">
                                        <div style="color: #909399;font-size: 14px">本周销售总额</div>
                                        <div style="color: #606266;font-size: 24px;padding: 10px 0">50000</div>
                                        <div>
                                            <span class="color-danger" style="font-size: 14px">-10%</span>
                                            <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="20">
                                <div style="padding: 10px;border-left:1px solid #DCDFE6">
                                    <el-date-picker
                                            style="float: right;z-index: 1"
                                            size="small"
                                            v-model="orderCountDate"
                                            type="daterange"
                                            align="right"
                                            unlink-panels
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            @change="handleDateChange"
                                            :picker-options="pickerOptions">
                                    </el-date-picker>
                                    <div>
                                        <ve-line
                                                :data="chartData"
                                                :legend-visible="false"
                                                :loading="loading"
                                                :data-empty="dataEmpty"
                                                :settings="chartSettings"></ve-line>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="../js/home.js"></script>
<script th:inline="javascript">
    console.log( [[${ orderDatas }]]);
    let courseAvgs = [[${ orderDatas }]]
    setList(courseAvgs);
</script>
</html>